@charset "UTF-8"; @import url("http://wwwtest.jqa.jp/common/css/style.css"); /* =================================== 共通 =================================== */ /* =================================== 画面全体のレイアウト =================================== */ /* 画面全体の表示設定 */ body { background: ; /* 背景色 */ text-align:; /* フォームエリアを中央に表示 */ } /* フォームエリア全体の設定 */ div.container { background:#fff; /* 背景色 */ border /* 外枠のラインの色と太さ */ font-size:; /* フォントの初期サイズ */ color:#333; /* フォントの初期カラー */ margin:0 auto; /* 画面の中央に表示 */ text-align:left; /* 左寄せ */ } /* =================================== 設問エリアのレイアウト =================================== */ /* 設問エリア全体の設定 */ div.wrapper { width:; /* 画面の横幅 */ margin:0 auto; /* 中央に表示 */ background:#fff; } /* 設問の表 */ table.items { width:100%; border-left:#d5d5d5 1px solid; } /* 設問の行 */ tr.item {} /* 必要であれば行のデザインを設定することができます */ /*設問名のセルのデザイン */ td.label { width:30%; /* 実際の設問名の文字の長さに合わせて調整してください */ padding:10px; padding-right:0; color:#333; font-weight:bold; vertical-align:middle; /* ラベルの配置 セルの上部に表示したい場合は top */ background:#f2f2f2; border-top:#d5d5d5 1px solid; border-bottom:#d5d5d5 1px solid; } /* 設問の入力セルおよび表示セルのデザイン */ td.value { width:; /* 入力コントロールの幅に合わせて調整してください */ padding:10px; border:#d5d5d5 1px solid; background:#ffffff; } /* 設問の入力例/説明セルのデザイン */ /* テーブルの一番右にある。表示していない */ td.comment { width:; font-size:1px; padding-left:1px; color:#111; background:#fff; } /* 入力欄の枠の高さ、線 （幅は修正不可）※「同意」ボタン（input）と連動するので注意ー川瀬　*/ textarea { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "MS Pゴシック", sans-serif; font-weight:normal; width:85%; padding:10px; border:#d5d5d5 1px solid; } input[type=text]{ padding:5px 10px; vertical-align:bottom; border:#d5d5d5 1px solid; } /* 入力中のフィールドの背景色 */ /* それぞれの入力フィールドにカーソルが移動したときに背景の色が変わります。不要な場合は削除してください。 */ input[type="text"]:focus { background-color:#ffffcc; border:2px solid #333;border-radius:5px;} /* テキストボックス */ select:focus {background-color:#ffffcc; border:2px solid #333;border-radius:5px; } /* プルダウン */ textarea:focus {background-color:#ffffcc; border:2px solid #333;border-radius:5px;} /* テキストエリア */ /* 「エリア」プルダウンのデザイン */ select { border:#d5d5d5 1px solid; padding:5px 10px; font-size:100%; } input[type=radio]{ height:; vertical-align:middle; margin-right:5px; } /* 入力セルの「氏」「名」の文字のデザイン */ span.label_name { margin-right:5px; font-size:; font-weight:bold; color:#333; } /* =================================== メッセージのデザイン =================================== */ /* プライバシーポリシーのリンク*/ .privacy_policy a { position: relative; text-decoration:underline; font-weight:700; display: inline-block; } .privacy_policy a:hover { cursor: pointer; text-decoration:none; } /* 入力確認画面、完了画面の入力された文字のデザイン */ p.value { font-size:110%; margin:0; vertical-align:middle; } /* ボタンの表示エリアの設定 */ div.button_area { width:; margin:10px auto 10px auto; /* 中央に表示、上下に10pxの余白 */ background:none; padding:10px 0; /* ボタンとの上下の隙間のサイズ */ text-align:center; /* 中央にボタンを表示 */ } /* 入力エラーメッセージのデザイン */ div.message { width:100%; padding:10px 15px; /* メッセージテキストと背景色の隙間のサイズ */ margin:10px 0px; /* 上 右 下 左 の隙間のサイズ */ font-size:; font-weight:bold; color:#c0392b; background: #efefef; } /* 公開終了メッセージのデザイン */ div.finished-message { padding:5px 10px 5px 10px; /* メッセージテキストと背景色の隙間のサイズ */ margin:10px 13px 10px 13px; /* 上 右 下 左 の隙間のサイズ */ font-size:129%; font-weight:bold; color:#c0392b; background:#cdd4d9; border: dotted 1px #9c9c9c; } /* =================================== 入力コントロールのデザイン =================================== */ /* 確認／送信／戻る／登録ボタン 　※設問エリアのinputと連動するので注意　*/ input[type=button]{ font-size:129%; width:280px; padding:20px; /* ボタンの文字の 上 右 下 左 の隙間のサイズ　※設問エリアのinputと連動するので注意 */ margin:0px 10px; /* 確認画面に表示される2つのボタンの左右の余白サイズ */ color:#fff; /* 文字の色 */ font-weight:bold; line-height:1.0; background: #005ead; white-space:nowrap; display:inline; position:relative; margin:0 5px auto; border:none; } /* ★↓アイコンが効かない ★ */ input[type=button]:after{ position: absolute; top: 50%; right: 15px; width: 26px; height: 26px; background: url(http://wwwtest.jqa.jp/common/img/ico_arrow_right_circle_01.svg) no-repeat; background-size: 26px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); content: ""; } input[type=button]:hover { cursor: pointer; opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)" } /* =================================== 必須項目のマークおよびメッセージなど =================================== */ /* 必須項目のマーク */ span.required { float:right; margin-right:10px; font-size:; font-weight:bold; color:#c0392b; } span.required:after { /* ここを編集することで表示されるマークを変更できます */ content:"*"; } /* 必須項目についての説明文 */ p.required_msg { text-align:left; margin-right:; font-size:; font-weight:normal; color:##333; } p.required_msg:after { /* ここを編集することで表示されるマークを変更できます */ content:"以下の項目を入力してください。"; } /* メールアドレスの再入力メッセージ */ p.label_mail { margin:5px 0 1px 0; font-size:86%; font-weight:bold; color:#333; } p.label_mail:after { /* ここを編集することで表示されるメッセージを変更できます */ content:"確認のため、もう一度メールアドレスを入力してください。"; } p.label_tel:after { /* ここを編集することで表示されるメッセージを変更できます */ content:""; } @media screen and ( min-width:480px ) { div.container { width: 850px; } } /* =================================== スマートフォン表示用のレイアウト =================================== */ /* スマートフォンとして認識する画面の横幅のサイズ */ @media screen and ( max-width:479px ) { /* フォームエリア全体の設定 */ div.container { width: 100%; } /* 設問エリア全体の設定 */ div.wrapper { width: 100%; } /* 設問の表 */ table.items { width:100% ; border-top:#d5d5d5 1px solid; } /*設問名のセルのデザイン */ td.label { float: left; width:100%; height: ; padding-top:10px; border-top:none; border-right:#d5d5d5 1px solid; } /* 必須項目のマーク */ span.required { float:initial; } /* 設問の入力セルおよび表示セルのデザイン */ td.value { float: left; width: 100%; /* 入力コントロールの幅に合わせて調整してください */ padding-bottom: 0px; border-top:none; border-right:#d5d5d5 1px solid; border-bottom:none; border-left:none; } /* 設問の入力例/説明セルのデザイン */ td.comment { float: left; width: 100%; padding: 0px 2px 10px 2px; border-bottom:#d5d5d5 1px solid; border-right:#d5d5d5 1px solid; } /* 設問の入力例/テキストボックス */ input[type="text"]{ font-size: 120%; width: 100% !important; } /* 設問の入力例/テキストエリア */ textarea { width: 100%; height: 100px; } /* ボタンの表示エリアの設定 */ div.button_area { width: 100%; } }